<div th:fragment="html">
    <div id="simulationDiv">
        <span class="label label-info">回测参数</span>
        <table class="inputTable ">
            <tr>
                <td width="15%" align="right">
				<span data-toggle="tooltip" data-placement="top" title="选择某一个指数进行模拟回测">
					请选择指数:<span class="glyphicon glyphicon-question-sign" > </span>
				</span>
                </td>
                <td width="25%">
                    <select v-model="simMap.fundData.code" class="indexSelect form-control" @click="simulate">
                        <option v-for="bean in myFundMains " :value="bean.code">{{bean.fundname}} - ( {{bean.code}} )</option>
                    </select>
                </td>
                <td align="right">
            				<span data-toggle="tooltip" data-placement="top" title="MA 即 moving average, 移动均线的意思。 比如MA20就表示20日均线，取最近20天的值的平均数">
            				MA(均线) :<span class="glyphicon glyphicon-question-sign" > </span>
           				</span>
                </td>
                <td>
                    <select class="form-control" @change="changeParam" v-model="simMap.maVal">
                        <option value="5" selected>5日</option>
                        <option value="7">7日</option>
                        <option value="10">10日</option>
                        <option value="20">20日</option>
                        <option value="60">60日</option>
                    </select>
                </td>
                <td width="10%"></td>
            </tr>
            <tr>
                <td align="right">
           				<span data-toggle="tooltip" data-placement="top" title="指定模拟回测的开始日期，默认是当前指数最开始的日期">
            				开始日期:<span class="glyphicon glyphicon-question-sign	" > </span>
           				</span>
                </td>
                <td>
                    <div class="form-group">
                        <div class="input-group date" id="date4Start">
<!--                            <input  type="text" readOnly="readOnly" class="form-control"  ><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>-->
                            <input type="text" class="form-control" v-model="simMap.startDate" placeholder="格式：2021-01-12">
                        </div>
                    </div>
                </td>
                <td align="right">
           				<span data-toggle="tooltip" data-placement="top" title="指定模拟回测的结束日期，默认是当前指数最后的日期">
            				结束日期:<span class="glyphicon glyphicon-question-sign	" > </span>
           				</span>
                </td>
                <td>
                    <div class="form-group">
                        <div class="input-group date" id="date4End">
<!--                            <input type="text" readOnly="readOnly" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>-->
                            <input type="text" class="form-control" v-model="simMap.endDate" placeholder="格式：2021-01-12">
                        </div>
                    </div>
                </td>
            </tr>
        </table>

        <div class="label label-warning">收益对比图</div>

        <div  class="div4chart" style="margin:0px auto; width:80%">
            <canvas class='canvas4Profit'></canvas>
        </div>
        <br><br>

        <input type="text" class="form-control" id="simSmfdId" v-model="simMap.fundData.id" style = "display:none">
        <input type="text" class="form-control" id="simSmfdCode" v-model="simMap.fundData.code" style = "display:none">
        <input type="text" class="form-control" id="simSmsd" v-model="simMap.startDate" style = "display:none">
        <input type="text" class="form-control" id="simSmed" v-model="simMap.endDate" style = "display:none">
        <input type="text" class="form-control" id="simSmmv" v-model="simMap.maVal" style = "display:none">
<!--        <input type="text" class="form-control" id="simSmbt" v-model="simMap.buyThreshold" style = "display:none">-->
<!--        <input type="text" class="form-control" id="simSmst" v-model="simMap.sellThreshold" style = "display:none">-->

        <input type="text" class="form-control" id="isCurrency" v-model="isCurrency" style = "display:none">

    </div>

    <div id="myTabDiv">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#trend" data-toggle="tab">趋势投资</a>
            </li>
            <li><a href="#grid" data-toggle="tab">网格</a></li>
            <li><a href="#castSurely" data-toggle="tab">定投</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <!--        趋势-->
            <div class="tab-pane fade in active" id="trend">
                <div th:replace="follow/simulation/trend::html" ></div>
            </div>

            <!--        网格-->
            <div class="tab-pane fade" id="grid">
                <div th:replace="follow/simulation/grid::html" ></div>
            </div>

            <!--        定投-->
            <div class="tab-pane fade" id="castSurely">
                <div th:replace="follow/simulation/castSurely::html" ></div>
            </div>
        </div>
    </div>

    <script>
        var chart4Profit = null;

        $(function () {
            var simulationVue = {
                simMap:{fundData:{id:'',code:''},startDate:'',endDate:'',maVal:5},
                myFundMains:[],
                myFundMain:{id:'',code:'',fundname:'',fundtype:'',commissionRate:''},

                fundDatas:[],
                resMap:{},
                fundMains: [],
                moveAvgs:[],
                isCurrency:false,
            };
            var vue = new Vue({
                el: '#simulationDiv',
                data: simulationVue,
                mounted: function () {
                    // this.init();
                    this.$nextTick(function () {
                        this.init();
                    });

                },
                methods: {
                    init:function(){
                        // 先获取所有，后续修改成用户个性化
                        var url = "/fundmains/list";
                        axios.get(url).then(function (response) {
                            vue.myFundMains = response.data.list;
                            if(vue.myFundMains.length>0){
                                vue.simMap.fundData.code=vue.myFundMains[0].code;
                                vue.getMyFundMain();
                                vue.simulate();

                                // 赋值，给子页面数据
                                $("#simSmfdId").val(vue.myFundMains[0].id);
                                $("#simSmfdCode").val(vue.myFundMains[0].code);
                                $("#simSmmv").val(5);
                                // $("#simSmbt").val(1.01);
                                // $("#simSmst").val(0.99);
                                // $("#trendInit").click();
                            }
                        });
                    },

                    simulate:function(){
                        vue.getMyFundMain();
                        vue.dataList();
                        if(vue.myFundMain.fundtype!="货币型"){
                            $("#myTabDiv").show();
                            vue.isCurrency=false;
                            vue.moveAvgList();
                        }else {
                            $("#myTabDiv").hide();
                            vue.isCurrency=true;
                        }

                        // $("#trendInit").click();
                    },
                    dataList:function(){
                        var url =  "/funddatas/list";
                        axios.post(url,vue.simMap).then(function(response) {
                            var result=response.data;
                            if(result.code==0){
                                vue.fundDatas=result.list;
                                vue.dataChart();
                            }else {
                                alert(result.msg);
                            }
                        });
                    },
                    dataChart:function(){
                        //定义chartjs表图字段
                        var dates = new Array();
                        var closePoints = new Array();

                        var iscurrency = vue.myFundMain.fundtype=="货币型";
                        var moveAvgVals = new Array();

                        for(i in vue.fundDatas){
                            var indexData = vue.fundDatas[i];
                            dates.push(indexData.funddate);
                            if(indexData.networth == null || indexData.networth == ""){
                                closePoints.push(indexData.millioncopiesincome);
                            }else{
                                closePoints.push(indexData.networth);
                            }

                            if(iscurrency)
                                moveAvgVals.push(vue.fundDatas[i].sevendaysyearincome);
                        }

                        //收益图标
                        chart4Profit.config.data.labels = dates;
                        chart4Profit.config.data.datasets[0].label = vue.simMap.fundData.code;
                        chart4Profit.config.data.datasets[0].data = closePoints;

                        if(iscurrency){
                            chart4Profit.config.data.datasets[1].label = "七日年化收益";
                            chart4Profit.config.data.datasets[1].data = moveAvgVals;
                        }

                        chart4Profit.update();
                    },

                    moveAvgList:function(){
                        var url =  "/funddatas/moveAvg";
                        axios.post(url,vue.simMap).then(function(response) {
                            var result=response.data;
                            if(result.code==0){
                                vue.moveAvgs=result.list;
                                vue.moveAvgChart();
                            }else {
                                alert(result.msg);
                            }
                        });
                    },
                    moveAvgChart:function(){
                        var moveAvgVals = new Array();

                        if(vue.myFundMain.fundtype=="货币型"){
                            for(var i in vue.fundDatas){
                                moveAvgVals.push(vue.fundDatas[i].sevendaysyearincome);
                            }
                            chart4Profit.config.data.datasets[1].label = "七日年化收益";
                        }else{
                            for(var i in vue.moveAvgs){
                                moveAvgVals.push(vue.moveAvgs[i].ma);
                            }
                            chart4Profit.config.data.datasets[1].label = "移动平均线";
                        }

                        chart4Profit.config.data.datasets[1].data = moveAvgVals;
                        chart4Profit.update();
                    },

                    gridList:function(){
                        var url =  "/funddatas/grid";
                        axios.post(url,vue.simMap).then(function(response) {
                            var result=response.data;
                            if(result.code==0){
                                vue.fundDatas=result.list;
                                console.log("vue.fundDatas:"+vue.fundDatas[0].funddate);
                                console.log("length:"+vue.fundDatas.length);
                                vue.simulate();
                            }else {
                                alert(result.msg);
                            }
                        });
                    },

                    getMyFundMain:function(){
                        for(var i in vue.myFundMains){
                            if(vue.myFundMains[i].code==vue.simMap.fundData.code){
                                vue.myFundMain=vue.myFundMains[i];
                            }
                        }
                    },


                    changeParam:function () {
                        // vue.flushDate = false;
                        // vue.simulate();
                    },


                },
            });

            var ctx4Profit = $(".canvas4Profit")[0].getContext('2d');
            chart4Profit = new Chart(ctx4Profit, {
                type: 'line',
                data: {
                    labels: '',
                    datasets: [
                        {
                            label: '',
                            data: [],
                            borderColor: '#FF4040',
                            backgroundColor: '#FF4040',
                            borderWidth: 1.2,
                            pointRadius: 0,
                            fill: false,
                            lineTension: 0,
                        },
                        {
                            label: '',
                            data: [],
                            borderColor: '#5D98C8',
                            backgroundColor: '#5D98C8',
                            borderWidth: 1,
                            pointRadius: 0,
                            fill: false,
                            lineTension: 0,
                        },
                        // {
                        //     label: '趋势投资',
                        //     data: [],
                        //     borderColor: '#FFE9A2',
                        //     backgroundColor: '#FFE9A2',
                        //     borderWidth: 1.2,
                        //     pointRadius: 0,
                        //     fill: false,
                        //     lineTension: 0,
                        // }
                    ]
                },
                options: {
                    title: {
                        display: true,
                        text: '指数趋势投资收益对比图'
                    },
                    responsive: true,
                    responsiveAnimationDuration:3000,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: false,
                            }
                        }]
                    },
                    tooltips: {
                        intersect: false,
                        mode: 'index',
// 	   					axis: 'y',
                        callbacks: {
                            label: function(tooltipItem, myData) {
                                var label = myData.datasets[tooltipItem.datasetIndex].label || '';
                                if (label) {
                                    label += ': ';
                                }
                                label += parseFloat(tooltipItem.value).toFixed(2);
                                return label;
                            }
                        }
                    }
                }
            });
        });
    </script>

</div>
